import React, {FC, useContext} from 'react';
import "./JournalNewsDetail.less";
import {Link, useParams} from "@@/exports";
import NewsDetailComp from "@/pages/NewsPage/NewsDetail/NewsDetailComp";
import {useRequest} from "ahooks";
import * as API from "@/services";
import {correspVal, getArticleLocationStr} from "@/utils/biz";
import {Breadcrumb} from "antd";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {JournalDetailContext} from "@/pages/JournalPage/JournalDetail/commons/JournalDetailContext";

interface JournalNewsDetailProps {
}

const JournalNewsDetail: FC<JournalNewsDetailProps> = (props) => {
  const {isZhCN, authedRedirect} = useContext(HxConfigContext);
  const {journal} = useContext(JournalDetailContext);
  const urlParams = useParams();
  const journalId = urlParams["journalId"];
  const newsId = urlParams["*"];

  const detailReq = useRequest(() => API.queryFrontNews(newsId!), {
    refreshDeps: [newsId],
    ready: !!newsId,
  });

  const record = detailReq.data?.data;
  const journalName = correspVal(isZhCN, record?.journal?.journalNameCn || journal?.journalNameCn, record?.journal?.journalNameEn || journal?.journalNameEn);

  return (
    <div className={"journal-news-detail-container"}>
      <Breadcrumb
        className={"journal-news-breadcrumd"}
        items={[
          {title: (<Link to={`/journal/${record?.journal?.id || record?.journalId}/archive`}>{journalName}</Link>)},
          {title: record?.openedTime}
        ]}
      />
      <div className={"journal-news-page"}>
        {
          !!record && (
            <NewsDetailComp record={record}/>
          )
        }
      </div>
    </div>
  );
};

export default JournalNewsDetail;
